<template>
  <div class="app-container">


    <tree-table :data="data" :evalFunc="func" :evalArgs="args" :expandAll="expandAll" border>
      <el-table-column label="事件">
        <template slot-scope="scope">
          <span style="color:sandybrown">{{scope.row.event}}</span>
          <el-tag>{{scope.row.timeLine+'ms'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template slot-scope="scope">
          <el-button type="text" @click="message(scope.row)">点击</el-button>
        </template>
      </el-table-column>
    </tree-table>
  </div>
</template>

<script>
import treeToArray from '@/assets/js/eval'
import { mapGetters } from 'vuex'

import treeTable from '@/components/Common/TreeTable1'

export default {
  name: 'customTreeTableDemo',
  components: { treeTable },
  data() {
    return {
      func: treeToArray,
      expandAll: false,
      data:
        {
          id: 1,
          event: '事件1',
          comment: '无',
          children: [
            {
              id: 2,
              event: '事件2',
              comment: '无'
            },
            {
              id: 3,
              event: '事件3',
              comment: '无',
              children: [
                {
                  id: 4,
                  event: '事件4',
                  comment: '无'
                },
                {
                  id: 5,
                  event: '事件5',
                  comment: '无'
                },
                {
                  id: 6,
                  event: '事件6',
                  comment: '无',
                  children: [
                    {
                      id: 7,
                      event: '事件7',
                      comment: '无',
                      children: [
                        {
                          id: 71,
                          event: '事件71',
                          comment: 'xx'
                        },
                        {
                          id: 72,
                          event: '事件72',
                          comment: 'xx'
                        },
                        {
                          id: 73,
                          event: '事件73',
                          comment: 'xx'
                        }
                      ]
                    },
                    {
                      id: 8,
                      event: '事件8',
                      comment: '无'
                    }
                  ]
                }
              ]
            }
          ]
        },
      args: [null, null, 'timeLine']
    }
  },
  methods: {
    message(row) {
      this.$message.info(row.event)
    }
  }
}
</script>
